<!-- 搜索用户组件 -->
<template>
    <div class="search-com">
        <i class="icon el-icon-plus" @click="isShow=true"></i>
        <el-dialog class="dialog" title="搜索用户" width="600px" :visible.sync="isShow"
            :before-close="beforeClose" >
            <div class="content">
                <!-- 搜索框 -->
                <div class="search-warp">
                    <div :class="'search-view' + (hasFocus?' search-view-focus':'')">
                        <i class="el-icon-search"></i>
                        <input type="text" placeholder="搜索邮箱或用户名" v-model="keyword" @keydown.enter="searchUser"
                            @focus="hasFocus=true" @blur="hasFocus=false">
                    </div>
                </div>
                <!-- 搜索出来的用户信息 -->
                <div class="user-content scroll-bar-v" v-loading="isSearching"  element-loading-text="搜索中...">
                    <div class="user-info" v-show="userList.length > 0"
                        v-for="user in userList" :key="user.email">
                        <!-- 头像，点击触发个人信息 -->
                        <el-popover placement="top-start" width="330" trigger="click">
                            <user-info-com :user="user" />
                            <div class="avatar" slot="reference">
                                <el-image class="img" :src="user.avatar" fit="cover" lazy/>
                            </div>
                        </el-popover>
                        <div class="info">
                            <div class="name">{{user.name}}</div>
                            <div class="sign">{{user.sign}}</div>
                        </div>
                        <div class="option">
                            <div class="btn" v-if="getUserType(user.email)==='other'" @click="addFriend(user.email)">
                                添加好友
                            </div>
                            <div class="mine" v-else-if="getUserType(user.email)==='mine'">当前用户</div>
                            <div class="msg" v-else>好友</div>
                        </div>
                    </div>
                    <el-empty v-show="userList.length === 0" :image-size="200"></el-empty>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import UserInfoCom from './UserInfoCom.vue'
import axios from 'axios'

@Component({
    components:{
        UserInfoCom
    }
})
export default class SearchUserCom extends Vue {

    $message:any
    $store:any
    $alert:any

    // 是否显示悬浮窗
    public isShow:boolean = false

    // 搜索框是否具有焦点
    public hasFocus:boolean = false

    // 是否正在搜索
    public isSearching:boolean =false

    // 搜索关键字
    public keyword:string = ''

    // 搜索到的用户列表
    public userList:any[] = []

    // 悬浮窗关闭前回调
    public beforeClose(){
        this.isShow = false
        this.userList = []
        this.keyword = ''
    }

    public searchUser(){
        this.isSearching = true
        axios.get('/api/v1/user/search/' + this.keyword)
            .then(res=>{
                if(res.data.code === 200){
                    this.userList = res.data.data
                }else{
                    this.$message.error(res.data.msg)
                }
                this.isSearching = false
            }).catch(err=>{
                this.$message.eror('搜索用户失败:' +err)
                this.isSearching = false
            })
    }

    // 添加好友
    public addFriend(email:string){
        this.$prompt('请输入申请描述', '提示',{
            inputPattern: /^.{1,50}$/,
            inputErrorMessage: '申请信息长度在1~50个字之间'
        })
        .then((input)=>{
            const desc = (input as any).value
            axios.post(`/api/v1/friend/req/${email}?desc=${desc}`)
                .then(res=>{
                    if(res.data.code===200){
                        this.$message.success('好友请求发送成功!')
                    }else{
                        this.$message.warning(res.data.msg)
                    }
                })
                .catch(err=>{
                    this.$message.error('好友申请失败:' +err)
                })
        })
    }

    // 判断查询到的用户是否是好友
    public getUserType(email:string):string{
        const friends:any[] = this.$store.state.friends;
        if(typeof (friends.find(f=>f.user.email===email)) !== 'undefined'){
            return 'friend';
        }
        if(this.$store.state.user.email === email){
            return 'mine';
        }
        return 'other';
    }

}
</script>

<style lang="less" scoped>
@import '../css/index.less';
.search-com{
    width: 100%;
    height: 100%;
    .icon{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: black;
    }
    .dialog{
        /deep/ .el-dialog__body{
            padding: 0;
        }
        cursor: default;
        .content{
            padding: 0px 30px;
            height: 60vh;
            display: flex;
            flex-direction: column;
            .search-warp{
                .search-view-focus{
                    background-color: #FAFAFA !important;
                    input{
                        background-color: #FAFAFA !important;
                    }
                }
                .search-view{
                    background-color: #E8E8E8;
                    padding: 5px;
                    border-radius: 5px;
                    display: flex;
                    align-items: center;
                    .el-icon-search{
                        font-size: 18px;
                        margin-right: 5px;
                    }
                    input{
                        outline: none;
                        border-width: 0px;
                        font-size: 16px;
                        flex: 1;
                        background-color: #E8E8E8;
                    }
                }
            }
            .user-content {
                flex: 1;
                margin: 10px 0;
                .user-info{
                    display: flex;
                    padding: 10px 10px 10px 0;
                    &:hover{
                        background-color: #F7F7F7;
                    }
                    .avatar{
                        width: 50px;
                        height: 50px;
                        overflow: hidden;
                        border-radius: 5px;
                        cursor: pointer;
                        .img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .info{
                        flex: 1;
                        height: 50px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        margin-left: 10px;
                        .name{
                            color: black;
                            font-size: 16px;
                        }
                        .sign{
                            color: #999999;
                            font-size: 10px;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            overflow: hidden;
                        }
                    }
                    .option{
                        padding: 0px 10px;
                        display: flex;
                        align-items: center;
                        .btn{
                            height: 30px;
                            width: 80px;
                            border-radius: 2px;
                            color: white;
                            background-color: @theme-color;
                            text-align: center;
                            line-height: 30px;
                            border: 1px solid @theme-color;
                            transition: all 0.5s;
                            cursor: pointer;
                            &:hover{
                                background-color: white;
                                color: @theme-color;
                            }
                        }
                        .msg{
                            padding: 0px 20px;
                        }
                        .mine{
                            padding: 0px;
                        }
                    }
                }
            }
        }
    }
}
</style>